<template>
    <div class="chart-box">
        <swiper v-if="showSwper" ref="swiper" :options="swiperOptions" class="swiper">
            <swiper-slide v-for="(cur, i) in 10" :key="i" class="swiper-item">
                <div class="img-card" v-for="item in 4" :key="item" @click="$emit('clickItem')">
                    <div class="card-title">第一审判庭</div>
                    <div>案号：渝（民初）第2522号</div>
                    <div>案由：借款合同纠纷</div>
                    <div>开庭时间：2025-4-24 10:00-12:00</div>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>

export default {
    name: "CardList",
    data() {
        return {
            showSwper: false,
            swiperOptions: {
                loop: true,
                direction: 'vertical',
                slidesPerView: 4,
                autoplay: {
                    delay: 2000,
                    autoplay:3000
                }
            },
        }
    },
    mounted() {
        // 结局路由缓存问题
        setTimeout(() => {
            this.showSwper = true
        }, 0);
    },
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 900px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    padding: 15px 0 0;

    .img-card {
        flex: 1;
        font-size: 16px;
        text-align: center;
        color: #FFFFFF;
        flex-shrink: 0;
        margin: 0 10px;
        background-image: url('../../../assets/sp_box1.png');
        background-size: 100% 100%;
        cursor: pointer;
        height: 180px;
        padding: 0 20px;

        .card-title {
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            color: #00FFFF;
            margin: 0 0 15px;
        }
        div{
            width: 100%;
            text-align: left;
            line-height: 32px;
        }
    }
}

.swiper {
    height: 100%;
    width: 95%;

    .swiper-item {
        display: flex;
        width: 100%;
        align-items: center;
    }
}
</style>